<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-card class="search-card" shadow="hover">
      <div class="search-header">
        <i class="el-icon-search"></i>
        <span>训练查询</span>
      </div>
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="训练类型" prop="type">
          <el-select v-model="queryParams.type" placeholder="选择训练类型" clearable class="custom-select">
            <el-option
              v-for="dict in dict.type.train_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="选择状态" clearable class="custom-select">
            <el-option
              v-for="dict in dict.type.status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="训练名" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入训练名称" clearable>
            <i slot="prefix" class="el-input__icon el-icon-edit"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="训练时间" prop="time">
          <el-date-picker
            v-model="queryParams.time"
            type="date"
            placeholder="选择训练时间"
            value-format="yyyy-MM-dd"
            clearable
          />
        </el-form-item>
        <el-form-item label="年级" prop="grade">
          <el-select v-model="queryParams.grade" placeholder="选择年级" clearable>
            <el-option
              v-for="item in gradeOptions"
              :key="item.grade"
              :label="item.grade + '级'"
              :value="item.grade"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮区 -->
    <div class="action-bar">
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['manager:train:add']">
        发布训练
      </el-button>
    </div>

    <!-- 训练卡片展示区 -->
    <el-row :gutter="20" class="card-container">
      <el-col :xs="24" :sm="12" :md="8" v-for="item in trainList" :key="item.trainId">
        <el-card class="train-card" shadow="hover">
          <!-- 训练状态标签 -->
          <div class="status-tag" :class="getStatusClass(item.status)">
            {{ getStatusLabel(item.status) }}
          </div>

          <div class="train-header">
            <div class="header-main">
              <div class="title-row">
                <div class="train-type-tag" :class="getTypeClass(item.type)">
                  {{ dict.type.train_type[item.type].label }}
                </div>
                <div class="grade-tag">
                  <i class="el-icon-reading"></i>
                  {{ item.grade }}级
                </div>
              </div>
              <h3 class="train-name">{{ item.name }}</h3>
            </div>
          </div>

          <div class="train-body">
            <!-- 基本信息区域 - 固定高度 -->
            <div class="train-info">
              <div class="info-item">
                <i class="el-icon-time"></i>
                <span class="label">训练时间：</span>
                <span class="value">{{ parseTime(item.time) }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-timer"></i>
                <span class="label">请假截止：</span>
                <span class="value">{{ parseTime(item.overtime) }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-location"></i>
                <span class="label">训练地点：</span>
                <span class="value">{{ item.address || '待定' }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-user"></i>
                <span class="label">参训人数：</span>
                <span class="value">{{ item.number || 0 }}人</span>
              </div>
            </div>

            <!-- 训练内容区域 - 使用el-popover展示详细内容 -->
            <div class="train-content" v-if="item.content">
              <el-divider content-position="left">
                训练内容
                <el-popover
                  placement="right"
                  width="400"
                  trigger="click"
                  :popper-class="'content-popover'"
                >
                  <div class="content-detail rich-text" v-html="item.content"></div>
                  <el-button slot="reference" type="text" class="view-more">
                    查看详情<i class="el-icon-view el-icon--right"></i>
                  </el-button>
                </el-popover>
              </el-divider>
              <div class="content-preview rich-text" v-html="getContentPreview(item.content)"></div>
            </div>
          </div>

          <div class="train-actions">
            <!-- 左侧 - 训练详情按钮 -->
            <div class="left-actions">
              <el-button 
                type="primary"
                plain
                icon="el-icon-document" 
                size="small"
                style="background: #ecf5ff; border-color: #b3d8ff;"
                @click="handleDetail(item)"
              >训练详情</el-button>
            </div>

            <!-- 右侧 - 其他操作按钮 -->
            <div class="right-actions">
              <el-tooltip content="报名参加" placement="top">
                <el-button 
                  type="success" 
                  icon="el-icon-check" 
                  circle 
                  size="small" 
                  @click="handleRegister(item)"
                ></el-button>
              </el-tooltip>
              
              <el-tooltip content="请假申请" placement="top">
                <el-button 
                  type="info" 
                  icon="el-icon-time" 
                  circle 
                  size="small" 
                  @click="handleLeaveRequest(item)"
                ></el-button>
              </el-tooltip>

              <el-tooltip content="编辑训练" placement="top">
                <el-button 
                  type="warning" 
                  icon="el-icon-edit" 
                  circle 
                  size="small" 
                  @click="handleUpdate(item)"
                ></el-button>
              </el-tooltip>

              <el-tooltip content="删除训练" placement="top">
                <el-button 
                  type="danger" 
                  icon="el-icon-delete" 
                  circle 
                  size="small" 
                  @click="handleDelete(item)"
                ></el-button>
              </el-tooltip>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页器 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      class="pagination-container"
    />

    <!-- 添加/修改训练对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="训练类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择训练类型">
            <el-option
              v-for="dict in dict.type.train_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="训练名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入训练名称"/>
        </el-form-item>
        <el-form-item label="训练时间" prop="time">
          <el-date-picker
            v-model="form.time"
            type="datetime"
            placeholder="选择训练时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="请假截止" prop="overtime">
          <el-date-picker
            v-model="form.overtime"
            type="datetime"
            placeholder="选择请假截止时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="训练地点" prop="address">
          <el-input v-model="form.address" placeholder="请输入训练地点"/>
        </el-form-item>
        <el-form-item label="训练内容" prop="content">
          <editor v-model="form.content" :min-height="192"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 请假申请对话框 -->
    <el-dialog
      :title="leaveTitle"
      :visible.sync="leaveDialogVisible"
      width="500px"
    >
      <!-- 请假申请表单 -->
      <el-form v-if="!isViewingProgress" ref="leaveForm" :model="leaveForm" :rules="leaveRules" label-width="80px">
        <el-form-item label="请假理由" prop="reason">
          <el-input
            v-model="leaveForm.reason"
            type="textarea"
            placeholder="请输入请假理由"
            :rows="4"
          />
        </el-form-item>
        <el-form-item label="证明文件" prop="proof">
          <el-upload
            class="upload-demo"
            action="#"
            :http-request="handleUpload"
            :before-upload="beforeUpload"
            :limit="1"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过10MB</div>
          </el-upload>
        </el-form-item>
      </el-form>

      <!-- 审批进度 -->
      <div v-else class="leave-progress">
        <el-steps :active="leaveProgress.active" finish-status="success">
          <el-step title="提交申请" :description="leaveProgress.submitTime"></el-step>
          <el-step title="教练审批" :description="leaveProgress.coachApproval"></el-step>
          <el-step title="队长审批" :description="leaveProgress.captainApproval"></el-step>
        </el-steps>
        <div class="progress-status" :class="leaveProgress.status">
          当前状态：{{ getLeaveStatusText(leaveProgress.status) }}
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="leaveDialogVisible = false">{{ isViewingProgress ? '关闭' : '取消' }}</el-button>
        <el-button v-if="!isViewingProgress" type="primary" @click="submitLeaveRequest">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listTrain, getTrain, delTrain, addTrain, updateTrain, joinTrain, trainToUser, leaveTrain, getLeaveStatus } from "@/api/manager/train/train";
import { getUserProfile } from "@/api/system/user";
import { parseTime } from '@/utils/ruoyi'
import Editor from "@/components/Editor";
import { getToken } from "@/utils/auth";
import {listGrade} from "@/api/manager/grade/grade";

export default {
  name: "Train",
  dicts: ["train_type", "status","sias_gh_sy"],
  components: {
    Editor
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 训练表格数据
      trainList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: null,
        status: undefined,
        name: null,
        time: null,
        grade: undefined
      },
      // 表单参数
      form: {
        trainId: undefined,
        type: undefined,
        status: "0",
        name: undefined,
        time: undefined,
        overtime: undefined,
        address: undefined,
        content: undefined,
        number: 0
      },
      // 表单校验
      rules: {
        type: [
          { required: true, message: "训练类型不能为空", trigger: "change" }
        ],
        name: [
          { required: true, message: "训练名称不能为空", trigger: "blur" }
        ],
        time: [
          { required: true, message: "训练时间不能为空", trigger: "blur" }
        ],
        overtime: [
          { required: true, message: "请假截止时间不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "训练地点不能为空", trigger: "blur" }
        ]
      },
      // 抽屉显示状态
      drawer: false,
      // 参训人员列表
      trainUsers: [],
      // 当前用户ID
      currentUserId: null,
      // 请假对话框显示状态
      leaveDialogVisible: false,
      // 请假表单
      leaveForm: {
        trainId: null,
        reason: '',
        proof: ''
      },
      // 请假表单校验规则
      leaveRules: {
        reason: [
          { required: true, message: '请输入请假理由', trigger: 'blur' }
        ],
        proof: [
          { required: true, message: '请上传请假证明', trigger: 'change' }
        ]
      },
      userLoading: false, // 添加用户加载状态
      // 添加文件上传相关数据
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传地址
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      fileList: [],
      isViewingProgress: false,
      leaveProgress: {
        active: 0,
        status: '',
        submitTime: '',
        coachApproval: '',
        captainApproval: ''
      },
      leaveTitle: '请假申请',
      expandedCards: [], // 存储已展开的卡片ID
      // 添加状态选项
      statusOptions: {
        '0': '进行中',
        '1': '已结束'
      },
      // 添加年级选项数组
      gradeOptions: [],
    };
  },
  created() {
    this.getList();
    this.getCurrentUser();
    this.getGradeOptions(); // 添加获取年级选项的调用
  },
  methods: {
    // 添加时间格式化方法
    parseTime,
    
    /** 查询训练列表 */
    getList() {
      this.loading = true;
      listTrain(this.queryParams).then(response => {
        // 这里不需要手动处理状态，直接使用后端返回的status值
        this.trainList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    
    // 获取当前用户信息
    getCurrentUser() {
      getUserProfile().then(response => {
        this.currentUserId = response.data.userId;
      });
    },
    
    // 判断当前用户是否是参训人员
    isParticipant(train) {
      if (!this.currentUserId || !this.trainUsers || !this.trainUsers.length) {
        return false;
      }
      return this.trainUsers.some(user => 
        user.userId === this.currentUserId && 
        user.trainId === train.trainId
      );
    },
    
    // 处理报名参加
    handleRegister(row) {
      if (!row.trainId) {
        this.$modal.msgError("训练ID不能为空");
        return;
      }
      this.$modal.confirm('确认要参加该训练吗？').then(() => {
        return joinTrain({
          trainId: row.trainId
        });
      }).then(() => {
        this.$modal.msgSuccess("报名成功");
        this.getList();
      }).catch(() => {});
    },
    
    // 处理请假申请
    handleLeaveRequest(row) {
      if (!row.trainId) {
        this.$modal.msgError("训练ID不能为空");
        return;
      }
      
      // 重置表单和状态
      this.isViewingProgress = false;
      this.leaveForm = {
        trainId: row.trainId,
        reason: '',
        proof: ''
      };
      this.fileList = [];
      this.leaveTitle = '请假申请';
      this.leaveDialogVisible = true;
    },

    // 处理文件上传
    handleUpload(file) {
      // 模拟上传成功
      setTimeout(() => {
        this.leaveForm.proof = 'mock_file_url';
        this.$modal.msgSuccess("文件上传成功");
      }, 500);
    },

    // 上传前校验
    beforeUpload(file) {
      const isValidType = ['image/jpeg', 'image/png', 'application/pdf'].includes(file.type);
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isValidType) {
        this.$modal.msgError('只能上传JPG/PNG/PDF格式文件!');
        return false;
      }
      if (!isLt10M) {
        this.$modal.msgError('文件大小不能超过 10MB!');
        return false;
      }
      return true;
    },

    // 提交请假申请
    submitLeaveRequest() {
      this.$refs.leaveForm.validate(valid => {
        if (valid) {
          // 模拟提交请假申请
          setTimeout(() => {
            this.$modal.msgSuccess("请假申请已提交，等待审批");
            this.leaveDialogVisible = false;
            
            // 模拟显示审批进度
            setTimeout(() => {
              this.isViewingProgress = true;
              this.leaveProgress = {
                active: 1,
                status: 'pending',
                submitTime: this.parseTime(new Date()),
                coachApproval: '待审批',
                captainApproval: '待审批'
              };
              this.leaveTitle = '审批进度';
              this.leaveDialogVisible = true;
            }, 500);
          }, 1000);
        }
      });
    },

    // 获取审批进度步骤
    getProgressStep(status) {
      switch (status) {
        case 'pending': return 1;  // 已提交，等待教练审批
        case 'coach_approved': return 2;  // 教练已审批，等待队长审批
        case 'approved': return 3;  // 全部审批通过
        case 'rejected': return 3;  // 审批被拒绝
        default: return 0;
      }
    },

    // 获取审批状态文本
    getApprovalText(approval) {
      if (!approval) return '待审批';
      return approval.status === 'approved' 
        ? `已通过 (${parseTime(approval.time)})` 
        : `已拒绝 (${parseTime(approval.time)})`;
    },

    // 获取请假状态文本
    getLeaveStatusText(status) {
      const statusMap = {
        'pending': '等待教练审批',
        'coach_approved': '教练已通过，等待队长审批',
        'approved': '审批通过',
        'rejected': '审批未通过'
      };
      return statusMap[status] || '未知状态';
    },

    /** 查询按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加训练";
      // 设置默认状态为待开始
      this.form.status = '0';
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const trainId = row.trainId || this.ids;
      getTrain(trainId).then(response => {
        const data = response.data;
        // 根据时间判断状态
        const now = new Date().getTime();
        const trainTime = new Date(data.time).getTime();
        
        if (now > trainTime) {
          data.status = '2'; // 已结束
        } else {
          data.status = '1'; // 进行中
        }
        
        this.form = data;
        this.open = true;
        this.title = "修改训练";
      });
    },

    /** 查看详情按钮操作 */
    handleView(row) {
      this.reset();
      const trainId = row.trainId;
      getTrain(trainId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看训练详情";
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.trainId != null) {
            updateTrain(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addTrain(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const trainIds = row.trainId || this.ids;
      this.$modal.confirm('是否确认删除训练编号为"' + trainIds + '"的数据项？').then(() => {
        return delTrain(trainIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },

    // 表单重置
    reset() {
      this.form = {
        trainId: undefined,
        type: undefined,
        status: "0",
        name: undefined,
        time: undefined,
        overtime: undefined,
        address: undefined,
        content: undefined,
        number: 0
      };
      this.resetForm("form");
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "manager/train/export",
        {
          ...this.queryParams,
        },
        `train_${new Date().getTime()}.xlsx`
      );
    },

    // 获取状态样式类
    getStatusClass(status) {
      return status == 1 ? 'status-processing' : 'status-completed';
    },

    // 文件上传成功回调
    handleUploadSuccess(response, file, fileList) {
      // 模拟文件上传成功
      this.leaveForm.proof = 'mock_file_url';
      this.$modal.msgSuccess("文件上传成功");
      this.fileList = fileList;
    },

    // 文件上传失败回调
    handleUploadError() {
      this.$modal.msgError("文件上传失败");
    },

    // 文件上传前的校验
    beforeUpload(file) {
      const isValidType = ['image/jpeg', 'image/png', 'application/pdf'].includes(file.type);
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isValidType) {
        this.$modal.msgError('只能上传JPG/PNG/PDF格式文件!');
        return false;
      }
      if (!isLt10M) {
        this.$modal.msgError('文件大小不能超过 10MB!');
        return false;
      }
      return true;
    },

    // 切换内容展开/收起
    toggleContent(trainId) {
      const index = this.expandedCards.indexOf(trainId);
      if (index === -1) {
        this.expandedCards.push(trainId);
      } else {
        this.expandedCards.splice(index, 1);
      }
    },

    // 获取内容预览
    getContentPreview(content) {
      // 创建一个临时div来解析HTML
      const div = document.createElement('div');
      div.innerHTML = content;
      // 获取纯文本内容
      const text = div.textContent || div.innerText;
      // 返回前50个字符加省略号
      return text.length > 50 ? text.substring(0, 50) + '...' : text;
    },

    // 获取训练类型样式类
    getTypeClass(type) {
      const typeMap = {
        0: 'type-daily',    // 日常训练
        1: 'type-extra',    // 加训
        2: 'type-makeup'    // 补训
      };
      return typeMap[type] || 'type-daily';
    },

    // 获取状态显示文本
    getStatusLabel(status) {
      if (this.dict.type.status && this.dict.type.status[status]) {
        return this.dict.type.status[status].label;
      }
      return status == 1 ? '进行中' : '已结束';
    },

    // 获取年级选项
    getGradeOptions() {
      listGrade().then(response => {
        this.gradeOptions = response.rows;
      });
    },

    // 获取字典标签
    getDictLabel(value) {
      if (this.dict.type.sias_gh_sy && this.dict.type.sias_gh_sy[value]) {
        return this.dict.type.sias_gh_sy[value].label;
      }
      return value;
    },

    /** 查看训练详情 */
    handleDetail(item) {
      console.log('要传递的训练信息:', item);
      this.$router.push({
        path: '/manager/train/detail',
        query: {
          trainId: Number(item.trainId),  // 确保转换为数字类型
          name: item.name,
          time: item.time,
          overtime: item.overtime,
          address: item.address,
          content: item.content,
          type: item.type,
          number: item.number,
          grade: item.grade
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  min-height: calc(100vh - 84px);
  background: linear-gradient(to bottom, #f6f8fb, #f0f2f5);
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center center;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  
  .search-header {
    margin-bottom: 20px;
    font-size: 16px;
    color: #303133;
    font-weight: bold;
    
    i {
      margin-right: 8px;
      color: #409EFF;
    }
  }
}

.action-bar {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.train-card {
  position: relative;
  margin-bottom: 20px;
  border-radius: 8px;
  transition: all 0.3s;
  overflow: hidden;
  min-height: 300px; // 设置最小高度
  display: flex;
  flex-direction: column;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  }

  .status-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 12px;
    
    &.status-processing {
      background: rgba(64, 158, 255, 0.1);
      color: #409EFF;
    }
    
    &.status-completed {
      background: rgba(245, 108, 108, 0.1);
      color: #F56C6C;
    }
  }

  .train-header {
    margin-bottom: 20px;
    padding-right: 80px;

    .header-main {
      .title-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
      }

      .train-type-tag {
        display: inline-block;
        padding: 2px 12px;
        border-radius: 4px;
        font-size: 12px;
        
        &.type-daily {
          background: rgba(64, 158, 255, 0.1);
          color: #409EFF;
        }
        
        &.type-extra {
          background: rgba(230, 162, 60, 0.1);
          color: #E6A23C;
        }
        
        &.type-makeup {
          background: rgba(145, 97, 197, 0.1);
          color: #9161C5;
        }
      }

      .grade-tag {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        font-size: 12px;
        border-radius: 4px;
        background: #f5f7fa;
        color: #606266;
        font-weight: 500;
        border: 1px solid #dcdfe6;
        
        i {
          margin-right: 4px;
          font-size: 14px;
          color: #909399;
        }
      }

      .train-name {
        margin: 0;
        font-size: 18px;
        color: #303133;
        font-weight: 600;
      }
    }
  }

  .train-body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .train-info {
    padding: 10px 0;
    
    .info-item {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      
      i {
        color: #409EFF;
        margin-right: 8px;
        font-size: 16px;
      }

      .label {
        color: #606266;
        margin-right: 8px;
        width: 80px;
      }

      .value {
        color: #303133;
        flex: 1;
      }
    }
  }

  .train-content {
    .content-preview {
      padding: 10px 0;
      color: #606266;
      font-size: 14px;
      line-height: 1.6;
      height: 40px;
      overflow: hidden;
    }

    .view-more {
      padding: 0;
      font-size: 13px;
      margin-left: 10px;
      
      &:hover {
        color: #66b1ff;
      }
    }
  }

  .train-actions {
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left-actions {
      // 左侧按钮样式
      .el-button {
        padding: 8px 15px;
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }
    }

    .right-actions {
      display: flex;
      gap: 8px;
      
      // 右侧按钮样式
      .el-button {
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-2px);
        }
        
        &.is-circle {
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

// 响应式调整
@media screen and (max-width: 768px) {
  .train-card {
    margin: 10px 0;
  }
  
  .action-bar {
    flex-wrap: wrap;
  }
}

.drawer-container {
  padding: 20px;
  
  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
    
    h3 {
      margin: 0;
      font-size: 18px;
      color: #303133;
    }
  }
}

.leave-progress {
  padding: 20px;
  
  .el-steps {
    margin-bottom: 30px;
  }
  
  .progress-status {
    text-align: center;
    font-size: 16px;
    padding: 10px;
    border-radius: 4px;
    margin-top: 20px;
    
    &.pending {
      color: #E6A23C;
      background-color: #fdf6ec;
    }
    
    &.approved {
      color: #67C23A;
      background-color: #f0f9eb;
    }
    
    &.rejected {
      color: #F56C6C;
      background-color: #fef0f0;
    }
  }
}

// 弹出层样式
:global(.content-popover) {
  max-height: 600px;
  overflow-y: auto;
  
  .content-detail {
    padding: 10px;
  }
}

/* 添加样式 */
.class-group {
  margin-bottom: 24px;

  .class-header {
    padding: 12px 16px;
    background-color: #f5f7fa;
    border-radius: 4px;
    margin-bottom: 12px;

    h4 {
      margin: 0 0 8px 0;
      font-size: 16px;
      color: #303133;
    }

    .class-info {
      font-size: 14px;
      color: #606266;

      span {
        margin-right: 24px;
      }
    }
  }
}
</style>